/**
 * 折线图
 */
var mydate = new Date();
var nowyear = mydate.getFullYear();
$('.chart-year .year').html(nowyear);

// 路径配置
require.config({
    paths: {
          echarts: 'http://echarts.baidu.com/build/dist'
    }
});
// 使用
require(
    [
        'echarts',
        'echarts/chart/line' 
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('canvas')); 
        
        var option = {
		    tooltip : {
		        trigger: 'item',
		        backgroundColor:'rgba(0,0,0,0.3)'
		    },
		    grid:{
		    	x:50,
		    	y:30,
		    	x2:15,
		    	y2:30,
		    	borderWidth:1,
		    	borderColor:'#e8e9ed'
		    },
		    calculable : false,
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : ['1月','2月','3月','4月','5月','6月',
		            		   '7月','8月','9月','10月','11月','12月'
		            		],
		            axisLabel:{
		            	textStyle:{
		            		fontSize:12
		            	}
		            },
		            splitLine:{
		            	show:false
		            },
		            axisLine :{
		            	show : false
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            name : '金额（元）',
		            nameTextStyle : {
		            	color : '#999'
		            },
		            splitLine:{
		            	lineStyle:{
		            		color:['#e8e8ed'],
		            	}
		            },
		            axisLine :{
		            	show : false
		            }
		        }
		    ],
		    series : [
		        {
		            name:'金额',
		            type:'line',
		            itemStyle:{
		            	normal:{
		            		color:'#ccc',
		            		lineStyle:{
		            			color:'#3fa89d',
		            			width:1,
		            		}
		            	}
		            },
		            // data:[],
		            data:mathNum(),
		            symbol:'image://./resource/img/user_acc_tod.svg',
		            symbolSize:6,
		            smooth:true,
		            smoothness:0.2,
		        },
		    ]
		};
            

        // 为echarts对象加载数据 
        myChart.setOption(option);
		$.ajax({
			url:'/line_chart',
			type:'post',
			success:function(msg){
				$("#data_json").html(msg);
			}
		});
        function mathNum(){
			var dateMoth = false;
			var realTime = $('.chart-year .year').html();
			var jsonstr = $('#data_json').html()
			var Data = eval('(' + jsonstr + ')');

			$.each(Data,function(idx,obj){
				if (idx == realTime) {
					dateMoth = obj.data;
					return false;
				};
			});
			return dateMoth;
		}

		$(".chart-year .pre").click(function(){
			var year = parseInt($('.chart-year .year').html());
			if (mathNum() != false) {
				$('.chart-year .year').html(year - 1);
				myChart.setOption({
					series:[{
						data:mathNum()
					}]
				});
			};	
		});

		$(".chart-year .next").click(function(){
			var year = parseInt($('.chart-year .year').html());
			if (year < nowyear) {
				$('.chart-year .year').html(year + 1);
				myChart.setOption({
					series:[{
						data:mathNum()
					}]
				});
			};
		});

    }
);